<template>
  <div class="energy-pulse-container">
    <div
      v-for="(pulse, index) in pulses"
      :key="pulse.id"
      class="pulse-wave"
      :style="pulse.style"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const pulses = ref([])
let pulseCounter = 0
let pulseInterval = null

const createPulse = () => {
  const colors = [
    'rgba(99, 102, 241, 0.5)',   // 蓝
    'rgba(139, 92, 246, 0.5)',   // 紫
    'rgba(236, 72, 153, 0.5)',   // 粉
    'rgba(0, 243, 255, 0.5)',    // 霓虹蓝
  ]
  
  const color = colors[Math.floor(Math.random() * colors.length)]
  
  const pulse = {
    id: pulseCounter++,
    style: {
      '--pulse-color': color,
      '--pulse-duration': '3s',
      left: '50%',
      top: '50%',
    }
  }
  
  pulses.value.push(pulse)
  
  // 动画完成后移除
  setTimeout(() => {
    const index = pulses.value.findIndex(p => p.id === pulse.id)
    if (index > -1) {
      pulses.value.splice(index, 1)
    }
  }, 3000)
}

onMounted(() => {
  // 周期性创建脉冲波
  pulseInterval = setInterval(() => {
    createPulse()
  }, 4000)
  
  // 立即创建第一个
  createPulse()
  
  // 清理
  onUnmounted(() => {
    if (pulseInterval) {
      clearInterval(pulseInterval)
    }
  })
})
</script>

<style scoped>
.energy-pulse-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.pulse-wave {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--pulse-color, rgba(99, 102, 241, 0.5));
  transform: translate(-50%, -50%);
  animation: pulse-expand var(--pulse-duration, 3s) ease-out forwards;
  box-shadow: 
    0 0 20px var(--pulse-color, rgba(99, 102, 241, 0.5)),
    inset 0 0 20px var(--pulse-color, rgba(99, 102, 241, 0.3));
}

@keyframes pulse-expand {
  0% {
    width: 100px;
    height: 100px;
    opacity: 1;
    border-width: 3px;
  }
  50% {
    opacity: 0.6;
    border-width: 2px;
  }
  100% {
    width: 2000px;
    height: 2000px;
    opacity: 0;
    border-width: 1px;
  }
}

/* 额外的内部光晕 */
.pulse-wave::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--pulse-color, rgba(99, 102, 241, 0.3)) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  animation: pulse-glow var(--pulse-duration, 3s) ease-out forwards;
}

@keyframes pulse-glow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

